<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-blog"></i>
                <span>个人博客</span>
            </div>
            <div class="nav-menu">
                <a href="#" class="nav-link" onclick="showHome()">首页</a>
                <a href="/my-posts" class="nav-link" id="myPostsLink" style="display: none;">我的文章</a>
                <a href="#" class="nav-link" onclick="showCreatePost()" id="createPostLink" style="display: none;">写文章</a>
                <a href="#" class="nav-link" onclick="showLogin()" id="loginLink">登录</a>
                <a href="#" class="nav-link" onclick="showRegister()" id="registerLink">注册</a>
                <div class="user-info" id="userInfo" style="display: none;">
                    <span class="welcome-text">欢迎，</span>
                    <span class="username" id="currentUsername"></span>
                </div>
                <a href="#" class="nav-link" onclick="logout()" id="logoutLink" style="display: none;">退出</a>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container">
        <!-- 登录表单 -->
        <div id="loginForm" class="form-container" style="display: none;">
            <h2>用户登录</h2>
            <form onsubmit="login(event)">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
            </form>
        </div>

        <!-- 注册表单 -->
        <div id="registerForm" class="form-container" style="display: none;">
            <h2>用户注册</h2>
            <form onsubmit="register(event)">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" required minlength="3" maxlength="20">
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required minlength="6">
                </div>
                <button type="submit" class="btn btn-primary">注册</button>
            </form>
        </div>

        <!-- 创建文章表单 -->
        <div id="createPostForm" class="form-container" style="display: none;">
            <h2>写新文章</h2>
            <form onsubmit="createPost(event)">
                <div class="form-group">
                    <label for="postTitle">文章标题</label>
                    <input type="text" id="postTitle" required maxlength="200">
                </div>
                <div class="form-group">
                    <label for="postContent">文章内容</label>
                    <textarea id="postContent" rows="10" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发布文章</button>
                <button type="button" class="btn btn-secondary" onclick="showHome()">取消</button>
            </form>
        </div>

        <!-- 编辑文章表单 -->
        <div id="editPostForm" class="form-container" style="display: none;">
            <h2>编辑文章</h2>
            <form onsubmit="updatePost(event)">
                <input type="hidden" id="editPostId">
                <div class="form-group">
                    <label for="editPostTitle">文章标题</label>
                    <input type="text" id="editPostTitle" required maxlength="200">
                </div>
                <div class="form-group">
                    <label for="editPostContent">文章内容</label>
                    <textarea id="editPostContent" rows="10" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">更新文章</button>
                <button type="button" class="btn btn-secondary" onclick="showHome()">取消</button>
            </form>
        </div>

        <!-- 文章列表 -->
        <div id="postsList" class="posts-container">
            <h2>最新文章</h2>
            <div id="postsContent"></div>
            <div id="pagination" class="pagination"></div>
        </div>

        <!-- 文章详情 -->
        <div id="postDetail" class="post-detail" style="display: none;">
            <div id="postContent"></div>
            <div class="comments-section">
                <h3>评论</h3>
                <div id="commentForm" style="display: none;">
                    <form onsubmit="createComment(event)">
                        <input type="hidden" id="commentPostId">
                        <div class="form-group">
                            <textarea id="commentContent" placeholder="写下你的评论..." rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">发表评论</button>
                    </form>
                </div>
                <div id="commentsList"></div>
            </div>
        </div>

        <!-- 我的文章 -->
        <div id="myPostsList" class="posts-container" style="display: none;">
            <h2>我的文章</h2>
            <div id="myPostsContent"></div>
            <div id="myPostsPagination" class="pagination"></div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="message" class="message"></div>

    <!-- 加载指示器 -->
    <div id="loading" class="loading" style="display: none;">
        <i class="fas fa-spinner fa-spin"></i>
        <span>加载中...</span>
    </div>

    <script src="/static/js/app.js?v=20250827"></script>
</body>
</html>
